<template>
	<el-row type="flex" justify="center">
		<el-col>
			<el-input v-model="input" placeholder="请输入查询关键字" clearable @input="searchChange" @clear="clearSearch"></el-input>
		</el-col>
	</el-row>
	<el-table :data="tableData" height="70vh" style="width: 100%" border v-loading="loading">
		<el-table-column prop="no" label="序号" :resizable="false" fixed></el-table-column>
		<el-table-column v-for="(col,key) in Cols" :key="key" :prop="col.prop" :label="col.label" :resizable="false"></el-table-column>
		<!-- <el-table-column prop="id" label="ID"/> -->
		<!-- <el-table-column prop="no" label="序号" :resizable="false" v-show="true"/>
		<el-table-column prop="type" label="任务类型" :resizable="false" />
		<el-table-column prop="title" label="标题" :resizable="false" />
		<el-table-column prop="requirement_desc" label="任务内容" :resizable="false" />
		<el-table-column prop="rewards_desc" label="奖励" :resizable="false" />
		<el-table-column prop="unlock" label="解锁" :resizable="false" />
		<el-table-column prop="hint" label="推荐/攻略" :resizable="false" /> -->
	</el-table>
	<div class="block">
		<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1"
		 :page-size="100" layout="total, prev, pager, next" :total="total" background>
		</el-pagination>
	</div>
</template>

<script>
	import {
		// ref,
		reactive,
		toRefs,
		getCurrentInstance,
	} from "vue";
	export default {
		setup() {
			//data数据
			const datas = reactive({
				Cols: [{
					"prop": "type",
					"label": "任务类型",
					"value": "type",
					"visible": false
				}, {
					"prop": "title",
					"label": "标题",
					"value": "title",
					"visible": false
				}, {
					"prop": "requirement_desc",
					"label": "任务内容",
					"value": "requirement_desc",
					"visible": false
				}, {
					"prop": "rewards_desc",
					"label": "奖励",
					"value": "rewards_desc",
					"visible": false
				}, {
					"prop": "unlock",
					"label": "解锁",
					"value": "unlock",
					"visible": false
				}, {
					"prop": "hint",
					"label": "推荐/攻略",
					"value": "hint",
					"visible": false
				}],
				tableData: null,
				total: 0,
				loading: true,
				pageSize: 100,
				input: null,
				current: 1
			});
			//引用axios
			const {
				proxy
			} = getCurrentInstance();
			//获取数据
			const getDatas = (keyword, size, page) => {
				const url = "https://api.2015wuji01.net/mqxq/missions?mission_type=main&keyword=" + keyword + "&page=" + size +
					"&per_page=" + page;
				proxy.$axios.get(url).then(res => {
					// console.log(res);
					// datas.tableData = null;
					// datas.total = 0;
					console.log(res);
					datas.tableData = res.data.data.data;
					datas.total = res.data.data.total;
					datas.loading = false;
				});
			};
			//改变每页展出条数时
			const handleSizeChange = (val) => {
				datas.loading = true;
				datas.pageSize = val;
				getDatas("", datas.current, val);
			};
			//翻页
			const handleCurrentChange = (val) => {
				datas.current = val;
				datas.loading = true;
				getDatas("", val, datas.pageSize);
			};
			//查询
			const searchChange = (val) => {
				datas.current = 1;
				datas.loading = true;
				getDatas(val, 1, datas.pageSize);
			};
			const clearSearch = () => {
				datas.current = 1;
				datas.loading = true;
				getDatas("", 1, datas.pageSize);
			};
			const selectChange = () => {
				console.log(datas.value);
			};
			getDatas("", 1, datas.pageSize);
			// proxy.$axios.get("https://api.2015wuji01.net/api/missions").then(res=>{
			// 	console.log(res.data);
			// });
			// console.log(datas);
			return {
				handleSizeChange,
				handleCurrentChange,
				searchChange,
				clearSearch,
				selectChange,
				getDatas,
				...toRefs(datas)
			};
		}
	}
</script>

<style>
	.el-row {
		margin-bottom: 20px;
	}

	.block {
		/* margin-top: 20px; */
	}
</style>
